<template>
    <div style="width:100%; height:100vh; display: flex;align-items: center; justify-content: center;">
        <div class="login_bg" >
            <div class="login_logo"></div>
                <div class="login_logo">扬州百安科技</div>
                <div class="login_input">
                    <div><label>帐号：</label><input type="text" v-model="username" id="username"></div>
                    <div><label>密码：</label><input type="password" v-model="password" id="password" required></div>
                </div>

                <div class="login_footer">
                    <button @click="login" class="login_btn">登录</button>
                </div>
        </div>
    </div>
    <div ref="showMessage" style="display: flex; justify-content: center; align-items: center; margin-top: 15px;">
        用户名或密码出错！
    </div>
</template>

<script>
    import axios from 'axios'
    export default {
        data () {
            return {
                username: '',
                password: '',
                params: {
                    width: 200,
                    height: 110
                }
            }
        },
        methods: {
            login () {
                axios.post('/api/login.php?act=login', {
                    username: this.username,
                    password: this.password
                }, {
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded'
                    }
                })
                .then(response => {
                    const val = response.data
                    if (val.result) {
                        this.$router.replace('/index')
                        this.$store.commit('setloginData', { username: this.username, password: this.password })
                    } else {
                        this.$createWindow({
                            width: 200,
                            height: 110,
                            content: this.$refs.showMessage
                        })
                    }
                })
                .catch(error => {
                    console.error(error)
                })
            }
        }
    }
</script>

<style scoped>
  .login_bg{
    width:509px;
    height: 451px;
    background-color: #040d32;
    background-image: url('~@/assets/login_bg.png');
    background-position: center;
    background-repeat: no-repeat;
    opacity:1;
    -webkit-app-region: drag;
    position: absolute;
    box-shadow:0 0 8px #1af7ff;
    margin: 0;
    padding: 0;
}

.login_logo{
    width:100%;
    text-align: center;
    height: 35px;
    background-repeat: no-repeat;
    background-position: center;
    font-family: 华文彩云;
    font-size: xx-large;
    color:#1af7ff
}

.login_input{
    width:249px;
    height: 79px;
    border-radius:5px;
    margin: 0 auto;
    margin-top:68px;
    box-shadow:0 0 1px #1af7ff;
    color:#bfc9d8;
}

.login_input div{
    line-height: 38px;
    padding-left: 8px;
    padding-top:2px;
    color:#1af7ff;
    font-weight: bold;
    font-size: medium;
    border: none;
}

.login_footer{
    margin-top: 35px;;
}

.login_btn{
    -webkit-app-region:no-drag;
    width:159px;
    line-height: 27px;
    background-image: none;
    background: rgba(1, 13, 27, 0.5);
    text-align: center;
    border: 0;
    color:#1af7ff;
    font-size: medium;
    font-weight: bold;
    letter-spacing:10px;
    box-shadow: 2px 2px 2px #8BB4CC;
    border-radius: 5px;
}

</style>
